BinaryImage コントロールを GridView コントロール内のテンプレートフィールドに追加することで、バイナリ画像をグリッド内に表示することができます。このトピックでは、BinaryImage コントロールを GridView コントロールに統合して、バイナリ画像として保存されている画像をデータ連結シナリオで表示する方法について説明します。データベースにある画像を BinaryImage コントロールに追加するには、ImageData プロパティを使用します。

デザイナの場合

次の手順を実行します。

1. Visual Studio で、新しい ASP.Net Web アプリケーションを作成し、新しい Web フォームを追加します。
2. ツールボックスで C1GridView コントロールを見つけ、Web フォームにドラッグします。
3. C1GridView スマートタグ をクリックし、［データソースの選択］ドロップダウンリストから［<新しいデータソース...>］を選択します。これで、データソース構成ウィザードが開きます。SQL データベースを選択し、［OK］をクリックします。これで、［データソースの構成］ダイアログボックスが開きます。
4. ［データソースの構成］ダイアログボックスで、［新しい接続］をクリックします。これで、［接続の追加］ダイアログボックスが開きます。データソースを Microsoft Access データベースファイル（OLE DB）に変更し、データベースファイル名として C1NWind を選択します。［OK］をクリックします。
5. ［次へ］をクリックします。接続を保存し、［次へ］をクリックします。C1GridView に追加する列を指定し、［次へ］をクリックします。クエリーをテストし、［完了］をクリックします。

ソースビューの場合

<Columns></Columns> タグ内の <cc1:C1BoundField DataField="Picture" HeaderText="Picture" SortExpression="Picture">
</cc1:C1BoundField> タグを次の <cc1:C1TemplateField> マークアップと置き換えます。

<cc1:C1TemplateField HeaderText="Picture">
            <ItemTemplate>
                <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" 
                     ImageData='<%# Eval("Picture") %>' />
            </ItemTemplate>
        </cc1:C1TemplateField>

<cc1:C1GridView> の最終的なマークアップは次のようになります。

<cc1:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" 
          DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
       <Columns>
           <cc1:C1BoundField DataField="CategoryID" HeaderText="CategoryID" 
               ReadOnly="True" SortExpression="CategoryID">
           </cc1:C1BoundField>
           <cc1:C1BoundField DataField="CategoryName" HeaderText="CategoryName" 
               SortExpression="CategoryName">
           </cc1:C1BoundField>
           <cc1:C1BoundField DataField="Description" HeaderText="Description"
               SortExpression="Description">
           </cc1:C1BoundField>
         <cc1:C1TemplateField HeaderText="Picture">
               <ItemTemplate>
                   <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" 
                               ImageData='<%# Eval("Picture") %>' />
               </ItemTemplate>
           </cc1:C1TemplateField>
       </Columns>
   </cc1:C1GridView>

ここまでの成果

次の図に示すように、C1GridView コントロールに統合された BinaryImage コントロールに画像が表示されます。